<template>
  <div>
    <van-nav-bar
      @click-left="$router.push('/personal')"
      @click-right="$router.push('/index')"
      title="个人信息编辑"
      left-arrow
    >
      <template #right>
        <van-icon name="wap-home-o" size="22" color="#000" />
      </template>
    </van-nav-bar>
    <div class="content">
      <div class="head_img">
        <van-image
          round
          width="120px"
          height="120px"
          :src="userInfo.head_img | joinPath"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
        <van-uploader :after-read="afterRead" />
      </div>
      <van-cell-group>
        <!-- 修改昵称 -->
        <van-cell
          title="昵称"
          is-link
          :value="userInfo.nickname"
          @click="dialogName"
        />
        <van-dialog
          v-model="nicknameShow"
          title="编辑昵称"
          :beforeClose="nicknameBeforeClose"
          @confirm="changeNickname"
          show-cancel-button
        >
          <van-field
            required
            v-model="nickname"
            label="昵称"
            placeholder="请输入昵称"
          />
        </van-dialog>
        <!-- 修改密码 -->
        <van-cell @click="dialogPasswd" title="密码" is-link value="****" />
        <van-dialog title="编辑密码" show-cancel-button>
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-dialog>

        <!-- 修改性别 -->
        <van-cell
          title="性别"
          is-link
          :value="userInfo.gender == 1 ? '男' : '女 '"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { user, user_update } from "@/api/user.js";
import { upload } from "@/api/common.js";

export default {
  data() {
    return {
      userInfo: {},
      id: localStorage.getItem("userid"),
      nickname: "",
      nicknameShow: false,
      passwordShow: false,
    };
  },
  created() {
    // 获取用户信息
    let id = localStorage.getItem("userid");
    // 添加loading
    this.$toast.loading({
      message: "加载中...",
      duration: 0,
    });
    user(id).then((res) => {
      this.userInfo = res.data.data;
      this.$toast.clear();
    });
  },
  methods: {
    afterRead(file) {
      console.log("file", file);
      let fileObj = file.file;
      // 传文件必须使用formData
      let formData = new FormData();
      formData.append("file", fileObj);
      this.$toast.loading({
        message: "上传中...",
        duration: 0,
      });
      // 上传图片
      upload(formData).then((res) => {
        let url = res.data.data.url;
        console.log("res", res);
        user_update(this.id, {
          head_img: url,
        }).then((result) => {
          this.$toast.success(res.data.message);
          console.log("res", result);
          if (res.status == 200) {
            console.log("修改成功");
            this.userInfo.head_img = result.data.data.head_img;
          }
        });
      });
    },
    // 显示昵称弹窗
    dialogName() {
      this.nicknameShow = true;
      this.nickname = this.userInfo.nickname;
      console.log(this.nickname);
    },
    // 修改昵称
    changeNickname() {
      // 判断用户输入昵称是否为空
      if (!this.nickname) {
        this.$toast.fail("昵称不能为空！");
        return;
      }
      this.$toast.loading({
        message: "上传中...",
        duration: 0,
      });
      user_update(this.id, {
        nickname: this.nickname,
      }).then((res) => {
        if (res.status == 200) {
          console.log(64, res);
          // 修改成功后，更新昵称
          this.userInfo.nickname = res.data.data.nickname;
          this.$toast.success(res.data.message);
        } else {
          this.$toast.fail(res.data.message);
        }
      });
    },
    // 昵称弹窗关闭前会触发的一个函数
    // 调用done()表示关闭弹窗
    // 调用done(false)表示阻止弹窗关闭
    nicknameBeforeClose(action, done) {
      console.log(action);
      // done方法一定要调用，否则不会关闭弹窗
      if (!this.nickname && action == "confirm") {
        // 传入false表示 组件关闭弹窗
        done(false);
      } else {
        done();
      }
    },
  },
  dialogPasswd() {
    this.passwordShow = true;
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar {
  .van-icon {
    color: #000;
  }
}

.van-cell-group {
  margin-top: 60px;
  .van-cell {
    border-bottom: 1px solid #e9e9e9;
  }
}

.content {
  margin-top: 30px;
  .head_img {
    width: 30%;
    height: 100px;
    margin: 0 auto;
    position: relative;
    /deep/.van-uploader {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      .van-uploader__upload {
        width: 100%;
        height: 120px;
      }
    }
  }
}
</style>
